<template>  
    <view class="tabber" >
		<view class="tab-main">
			<view class="tab-main-lst" :class="{ 'tab-item-active': tabNumA == '1' }" @click="auUrl('/pages/home-btn/pages/liveBroadcast/liveBroadcast','1')">
				<image src="../static/vi-deo.png" v-if="tabNumA == '1'" class="tab-img"></image>
				<image src="../static/vi-de.png" v-else class="tab-img" style=""></image>
				<view>首页</view>
			</view>
			<view class="tab-main-center">
				<view class="conter" @click="auUrl('/pages/home-btn/pages/broadcastingRoom/broadcastingRoom','2')">
					<image src="../static/c-add.png" class="tab-center"></image>
				</view>
			</view>
			<view class="tab-main-lst" :class="{ 'tab-item-active': tabNumA =='3' }" @click="auUrl('/pages/home-btn/pages/liveMy/liveMy','3')">
				<image src='../static/ho-m.png' v-if="tabNumA == '3'" class="tab-img"></image>
				<image src='../static/he.png' v-else class="tab-img"></image>
				<view>我的</view>
			</view>
		</view>
    </view>  
</template>  

<script>  
    export default {  
        props:{
			tabNum:{
				type: String,
				default:null
			}
        },  
        data() {  
            return {
				tabNumA:this.tabNum
            };  
        },
        methods: {  
            auUrl(url,i){
				this.tabNumA = i
				if(url){
					uni.redirectTo({
						url:url
					})
				}
            },
        }  
    }  
</script>  
<style lang="scss" scoped>  
.tabber {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	background-image: url("../static/b-g.png");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	.tab-main{
		display: flex;
		justify-content: space-between;
		// position: relative;
		.tab-main-lst{
			padding: 15rpx;
			width: 50%;
			text-align: center;
			font-size: 31rpx;
			color: #A6A6A6;
			z-index: 222;
			margin-top: 10rpx;
			.tab-img{
				width: 60rpx;
				height: 60rpx;
			}
		}
		.tab-item-active{
			color: #FE9536;
		}
	}
}

.tab-main-center{
	width: 50%;
	text-align: center;
	// position: absolute;
	margin-top: -35rpx;
	margin-left: -50rpx;
	.conter{
		width: 20%;
		margin: 0 auto;
		height: 180rpx;
		.tab-center{
			width: 108rpx;
			height: 108rpx;
		}
	}
	
}

</style>  